<template>
  <div class="login-wrapper">
  
    <div class="modal">
   
      <a-form
    :model="userState"
    name="basic"
    :label-col="{ span: 8 }"
    :wrapper-col="{ span: 16 }"
    autocomplete="off"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >   
  <div class="title">wiki 知识库</div>

    <a-form-item
      label="loginName"
      name="loginName"
      :rules="rules.loginName"
    >
      <a-input v-model:value="userState.loginName" />
    </a-form-item>

    <a-form-item
      label="password"
      name="password"
      :rules="rules.password"
    >
      <a-input-password v-model:value="userState.password" />
    </a-form-item>

    <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
      <a-checkbox v-model:checked="userState.remember">记住密码</a-checkbox>
    </a-form-item>

    <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
      <a-button type="primary" html-type="submit">登录</a-button>
    </a-form-item>

  <a @click="register">点击从此处登录：<GithubFilled :style="{fontSize:'24px'}" /></a>
  </a-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useApi } from "@/api";
import useUserStore from "@/store/userStore";
import { ContentUser } from "@/views/type";
import {
  GithubFilled
} from '@ant-design/icons-vue';
import { storeToRefs } from "pinia";
import { reactive, ref } from "vue";


const { token, user } = storeToRefs(useUserStore());
const { setToken, setUser } = useUserStore();
const api = useApi();



interface FormState {
  loginName: string;
  password: string;
  remember: boolean;
}

// 用来登录
const userState = reactive<FormState>({
  loginName: '123',
  password: 'test123',
  remember: true,
});

import { useRouter } from "vue-router";
const router = useRouter(); 


const onFinish = async (values: any) => {
  console.log("开始登录");
  loginModalLoading.value = true;

  const data = await api.loginUser<ContentUser>(userState);

  console.log(data);

  user.value.id =data.id;
  user.value.loginName = data.loginName;
  user.value.name = data.name;
  user.value.token = data.token;
  if(data.token ){
    //往pinia存token和user
  setUser(data)
  console.log(token.value);
  setToken( data.token!);
  loginModalLoading.value = false;

  }
  router.push({name:'home'})

  console.log('Success:', values);
};



const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};

const rules = {
  loginName: [
    {
      required: true,
      message: "请输入用户名",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
  ],
};

const loginModalLoading = ref(false);


const callback_url = import.meta.env.VITE_APP_CALLBACK_URL;
const client_id =import.meta.env.VITE_APP_CLIENT_ID;


const register = ()=>{
  console.log()
// 构造OAuth授权的URL，确保redirect_uri已经设置为你期望接收回调的地址
const oauthUrl = `https://gitee.com/oauth/authorize?client_id=${client_id}&redirect_uri=${callback_url}/auth/oauth2.0/gitee/callback&response_type=code`;
console.log("构造url",oauthUrl);
// 使用window.location.href进行页面跳转
window.location.href = oauthUrl;
}
</script>

<style>
.login-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f9fcff;
  width: 100vw;
  height: 100vh;
}

.login-wrapper .modal {
  width: 500px;
  padding: 50px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0px 0px 10px 3px #c7c9cb4d;
}

.login-wrapper .modal .title {
  font-size: 50px;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 30px;
}
.login-wrapper .modal .btn-login {

  display: flex;
  flex-direction: row;
  justify-content: space-around;

}
.btn{
  width: 50%;
  margin: 20px;
}
.title{
  margin: 6px auto;
}
</style>
